<template>
  <view class="friendsCircle-content-item" v-for="(v, i) in applyList" :key="i">

    <view class="friendsCircle-content-right">

      <view class="group-item-left" @click="showMessage(v)">
        <head-image :name="v.targetCircleName" :url="v.avatar" :size="130"></head-image>
        <view class="group-name">
          <view class="friendsCircle-content-nickName">{{ v.targetCircleName }}</view>

          <view class="chat-tag" v-if="v.creatorId !== mine.id">
           <view style="font-size: 28rpx; color: #333;">
             {{ v.creator }}
           </view>
            <!--            <uni-tag v-if="v.sex==0" class="iconfont icon-man-arrow" style="background: #10AEFF; border: #999" disabled-->
            <!--                     :text="'&nbsp;' + v.age" size="mini" type="primary"></uni-tag>-->
            <!--            <uni-tag v-if="v.sex==1" class="iconfont icon-girl-arrow" style="background: #F76260; border: #999" disabled-->
            <!--                     :text="'&nbsp;' + v.age" size="mini" type="primary"></uni-tag>-->
          </view>

          <view v-if="v.creatorId == mine.id" class="friendsCircle-content-text">请求加入对方的圈子</view>
          <view v-if="v.targetId == mine.id" class="friendsCircle-content-text">请求加入你的圈子</view>

        </view>
        <span style="margin-left: auto; color: #999;  letter-spacing: 1rpx; font-size: 26rpx">
            <view class="friendsCircle-content-tools" v-if="v.targetId == mine.id && v.status == 1">
                 已同意
            </view>
            <view class="friendsCircle-content-tools" style="color: red" v-if="v.targetId == mine.id && v.status == 2">
                  已拒绝
            </view>
            <view v-if="v.creatorId == mine.id" :class="statusClass(v.status)">
                  {{ statusText(v.status) }}
            </view>
        </span>

        <view class="friendsCircle-content-tools" v-if="v.targetId == mine.id && v.status == 0">
          <button type="primary" style="background: #F76260; border-radius: 3rpx" size="mini"
                  @click.stop="onAdd(v, false)">拒绝
          </button>
          <button type="primary" style="background: #2782D7; margin-left: 20rpx;border-radius: 3rpx" size="mini"
                  @click.stop="onAdd(v, true)">
            同意
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getTimer} from "../../common";
import HeadImage from "../head-image/head-image.vue";
import http from '../../common/request';

export default {
  components: {HeadImage},
  // 朋友圈列表内容区
  data() {
    return {};
  },

  methods: {
    showMessage(apply) {
      const message = '【' + apply.creator + '】 请求加入圈子 【' + apply.targetCircleName + '】 \n' + '打招呼信息：' + apply.message + '\n 发起时间：' + getTimer(apply.createTime)


      uni.showModal({
        title: '详情',
        content: message,
        showCancel: false, // 只显示确定按钮
        confirmText: '确定', // 确定按钮的文本
        success: (res) => {
        }
      });
    },
    onAdd(v, agree) {
      http({
        url: `/circle/allow-join?circleId=${v.id}&agree=${agree}`,
        method: 'PUT',
      }).then((res) => {
        if (agree) {
          uni.showToast({
            title: "已同意",
            icon: "none"
          })
          v.status = 1
        } else {
          uni.showToast({
            title: "已拒绝",
            icon: "none"
          })
          v.status = 2
        }
        this.userStore.loadUserPendingCount()
      })
    },
    getTimer,
    statusClass(status) {
      switch (status) {
        case 0:
          return 'status-pending';
        case 1:
          return 'status-approved';
        case 2:
          return 'status-rejected';
        default:
          return '';
      }
    },
    statusText(status) {
      switch (status) {
        case 0:
          return '等待验证';
        case 1:
          return '已同意';
        case 2:
          return '被拒绝';
        default:
          return '';
      }
    }
  },


  props: {
    applyList: {
      type: Array,
      default: []
    }
  },
  computed: {
    mine() {
      return this.userStore.userInfo;
    },
    avatarTextStyle() {
      return `width: ${this.size}rpx;height:${this.size}rpx;
				color:${this.textColor};font-size:${this.size * 0.6}rpx;`
    },
  },
  mounted() {
    // #ifdef APP-PLUS
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height
    })
    // #endif
  },
};
</script>

<style scoped lang="scss">
.chat-tag {
  color: #999;
  font-size: 26rpx;
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  margin-right: 5rpx;
}

.group-name {
  font-size: 28rpx;
  padding-left: 20rpx;
  text-align: left;
  white-space: nowrap;
  color: #3b4144;
  overflow: hidden;
}

.group-item-left {
  height: 100rpx;
  display: flex;
  margin-bottom: 1rpx;
  position: relative;
  align-items: center;
  white-space: nowrap;
}

.zfb-tk-send-tool {
  background: #f7f7f7;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.zfb-tk-send-tool-c {
  padding: 16rpx 12rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border: 1px #ddd solid;
  border-left: none;
  border-right: none;
}

.status-pending {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: lightseagreen; /* 待对方同意 */
}

.status-approved {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: deepskyblue; /* 已同意 */
}

.status-rejected {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: red; /* 被拒绝 */
}

.zfb-tk-send-tool-c .zfb-tk-send-tool-btn {
  transition: color 0.5s;
}

.zfb-tk-send-tool .zfb-tk-send-tool-input {
  padding: 0 24rpx;
  box-sizing: border-box !important;
  width: 100%;
  background: #fff;
}

.zfb-tk-send-tool-text {
  white-space: nowrap;
  padding: 10rpx 24rpx;
  border-radius: 12rpx;
  border: 1px #ddd solid;
  background: #f7f7f7;
  color: #ddd;
}

.friendsCircle-content-item {
  background-color: white;
  display: flex;
  flex-direction: row;
  padding: 40rpx 14rpx;
  border-bottom: 1px #5F698C solid;
}

.friendsCircle-content-avatar {
  border-radius: 10rpx;
  width: 90rpx;
  height: 90rpx;
  min-width: 90rpx;
}

.friendsCircle-content-right {
  display: flex;
  flex-direction: column;
  padding-left: 18rpx;
  flex: 1;
  box-sizing: border-box;
}

.friendsCircle-content-nickName {
  font-weight: bold;
  font-size: 32rpx;
  color: #5F698C;
}

.friendsCircle-content-text {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.friendsCircle-content-imgs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  margin-top: 24rpx;
}

.friendsCircle-content-img {
  max-width: 100%;
}

.friendsCircle-content-img.fci1 {
  height: 550rpx;
  max-width: 500rpx;
  margin-right: 5px;
}

.friendsCircle-content-img.fci2 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci2:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci3 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci3:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci4 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci4:nth-child(2n) {
  margin-right: 185rpx;
}

.friendsCircle-content-img.fci5 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci5:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci6 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci6:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci7 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci7:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci8 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci8:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-img.fci9 {
  width: 185rpx;
  height: 185rpx;
  margin-right: 5rpx;
  margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci9:nth-child(3n) {
  margin-right: 0;
}

.friendsCircle-content-location {
  font-size: 24rpx;
  color: #5F698C;
  margin-top: 12rpx;
}

.friendsCircle-content-time {
  font-size: 24rpx;
  color: #666666;
  margin-right: auto;
}

.friendsCircle-content-tools {
  margin-top: 14rpx;
}

.friendsCircle-content-tool {
  padding: 4rpx 16rpx;
  border-radius: 10rpx;
  background-color: #F8F8FA;
  color: #63678C;
  display: flex;
  flex-direction: row;
  position: relative;
}

.tabon .friendsCircle-content-tool-absolute {
  display: block;
}

.friendsCircle-content-tool-absolute {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.friendsCircle-popup {
  margin-right: 24rpx;
  border-radius: 12rpx;
  background-color: rgba(0, 0, 0, 0.7);
  height: 75rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24rpx;
}

.friendsCircle-popup-item {
  color: #fff;
  padding: 0 25rpx;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.friendsCircle-popup-item:nth-child(1):active .friendsCircle-popup-icon {
  font-size: 56rpx;
}

.friendsCircle-popup-icon {
  font-size: 46rpx;
}

.friendsCircle-popup-text {
  white-space: nowrap;
}

.friendsCircle-like {
  border-radius: 8rpx;
  padding: 12rpx;
  background-color: #F7F7F7;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1px;
}

.friendsCircle-like-icon, .friendsCircle-like-text, .friendsCircle-comment-text {
  color: #5F698C !important;
  font-size: 28rpx;
}

.friendsCircle-comment-feedback .friendsCircle-comment-text {
  margin: 0 6rpx;
}

.friendsCircle-comment-text::after {
  content: ":";
  color: #333;
}

.friendsCircle-like-text {
  margin-left: 4rpx;
  margin-right: 10rpx;
}

.friendsCircle-like-text::after {
  content: ",";
}

.friendsCircle-like-text:nth-last-child(1)::after {
  content: "";
}

.friendsCircle-comment {
  background-color: #F7F7F7;
  border-radius: 8rpx;
}

.friendsCircle-comment-item {
  line-height: 40rpx;
  font-size: 28rpx;
  padding: 12rpx;
  white-space: pre-wrap;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.friendsCircle-comment-feedback {
  display: inline-block;
}

.friendsCircle-content-video {
  width: auto;
  height: 550rpx;
  max-width: 400rpx;
  position: relative;
  margin-top: 24rpx;
}

.friendsCircle-content-video-img {
  width: 100%;
  height: 100%;
}

.friendsCircle-content-video-icon {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80rpx !important;
  height: 80rpx !important;
  transform: translate(-50%, -50%);
}

.friendsCircle-comment-content {
}

.friendsCircle-comment-content text {
  word-break: break-all;
}

.zfb-tk-send-tool-input-box {
  overflow: auto;
  width: 100%;
  margin: 0 12rpx;
  min-height: 75rpx;
  background-color: #fff;
  border-radius: 24rpx;
  padding-top: 18rpx;
  max-height: 225rpx;
  box-sizing: border-box;
}

.avatar-text {
  background-color: #f2f2f2;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>
